<template>
  <div class="widget_settings_pro">
    <ele-form-section
        v-model="formData"
        :request-fn="handleSubmit"
        :sections="sections"
        @request-success="handleSuccess"
    >
      <template v-slot:form-btn="{ btns }">
        <div class="rest-btn" @click="reset">
          <svg-icon icon-class="reset-settings"></svg-icon>
          重置配置
        </div>
      </template>
    </ele-form-section>
  </div>
</template>

<script>
import uploadFile from '@/components/Upload/uploadFile';
import {debounce, deepClone} from '@/utils/utils';
const predefineColors = [
    '#ff4500',
    '#ff8c00',
    '#ffd700',
    '#90ee90',
    '#00ced1',
    '#1e90ff',
    '#c71585',
    'rgba(255, 69, 0, 0.68)',
    'rgb(255, 120, 0)',
    'hsv(51, 100, 98)',
    'hsva(120, 40, 94, 0.5)',
    'hsl(181, 100%, 37%)',
    'hsla(209, 100%, 56%, 0.73)'
];
export default {
    name: 'globalColorForm',
    props: {
        value: {
            type: Object,
            default: () => ({})
        },
        resetStyle: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        value: {
            handler (newVal, oldVal) {
                this.formData = JSON.parse(newVal.styleJson);
            },
            immediate: false,
            deep: true
        },
        formData: {
            handler (newVal, oldVal) {
                this.pageCount++;
                if (this.pageCount !== 1) {
                    this.setData();
                }
            },
            immediate: false,
            deep: true
        }
    },
    data () {
        return {
            pageCount: 1,
            formData: this.value ? JSON.parse(this.value.styleJson) : {},
            sections: [
                {
                    title: '颜色',
                    formDesc: {
                        'skin_bg': {
                            type: 'color',
                            label: '页面背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_title_color': {
                            type: 'color',
                            label: '标题',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_text_color': {
                            type: 'color',
                            label: '正文',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_price_color': {
                            type: 'color',
                            label: '现价',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_compare_at_price_color': {
                            type: 'color',
                            label: '原价',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_text_color_no_padding': {
                            type: 'color',
                            label: '紧凑模式正文',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_price_color_no_padding': {
                            type: 'color',
                            label: '紧凑模式现价',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_compare_at_price_color_no_padding': {
                            type: 'color',
                            label: '紧凑模式原价',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                },
                {
                    title: '按钮',
                    formDesc: {
                        'skin_primary_btn_bg_color': {
                            type: 'color',
                            label: '主要按钮背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_primary_btn_text_color': {
                            type: 'color',
                            label: '主要按钮字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_primary_btn_border_color': {
                            type: 'color',
                            label: '主要按钮边框',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_secondary_btn_bg_color': {
                            type: 'color',
                            label: '次要按钮背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_secondary_btn_text_color': {
                            type: 'color',
                            label: '次要按钮字体&边框',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_load_more_btn_bg_color': {
                            type: 'color',
                            label: '加载更多按钮背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_load_more_btn_text_color': {
                            type: 'color',
                            label: '加载更多按钮字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_load_more_btn_border_color': {
                            type: 'color',
                            label: '加载更多按钮边框',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_load_more_btn_hover_text_color': {
                            type: 'color',
                            label: '加载更多按钮hover字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_load_more_btn_hover_color': {
                            type: 'color',
                            label: '加载更多按钮hover',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_load_more_btn_hover_border_color': {
                            type: 'color',
                            label: '加载更多按钮hover边框',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        // quick_view 按钮颜色
                        'skin_quick_view_btn_bg_color': {
                            type: 'color',
                            label: '快速查看按钮背景',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_quick_view_btn_text_color': {
                            type: 'color',
                            label: '快速查看按钮字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_quick_view_btn_border_color': {
                            type: 'color',
                            label: '快速查看按钮边框',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_quick_view_btn_hover_color': {
                            type: 'color',
                            label: '快速查看按钮hover',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_quick_view_btn_hover_text_color': {
                            type: 'color',
                            label: '快速查看按钮hover字体',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        },
                        'skin_quick_view_btn_hover_border_color': {
                            type: 'color',
                            label: '快速查看按钮hover边框',
                            break: true,
                            attrs: {
                                'show-alpha': true,
                                predefine: predefineColors
                            }
                        }
                    }
                }
            ]
        };
    },
    methods: {
        handleSubmit (data) {
            console.log(data);
            return Promise.resolve();
        },
        handleSuccess () {
            this.$message.success('创建成功');
        },
        reset () {
            this.pageCount = 0;
            this.$emit('resetData', this.value);
        },
        setData: debounce(function () {
            let data = deepClone(this.value);
            data.styleJson = JSON.stringify(this.formData);
            this.$store.commit('SET_PROJECT_DATA', data);
        }, 600)
    },
    mounted () {
        if (!(('skin_text_color_no_padding') in this.formData)) {
            this.$set(this.formData, 'skin_text_color_no_padding', '#000');
        }
        if (!(('skin_price_color_no_padding') in this.formData)) {
            this.$set(this.formData, 'skin_price_color_no_padding', '#000');
        }
        if (!(('skin_compare_at_price_color_no_padding') in this.formData)) {
            this.$set(this.formData, 'skin_compare_at_price_color_no_padding', '#000');
        }
        if (!(('skin_load_more_btn_bg_color') in this.formData)) {
            this.$set(this.formData, 'skin_load_more_btn_bg_color', '#222222');
        }
        if (!(('skin_load_more_btn_text_color') in this.formData)) {
            this.$set(this.formData, 'skin_load_more_btn_text_color', '#ffffff');
        }
        if (!(('skin_load_more_btn_border_color') in this.formData)) {
            this.$set(this.formData, 'skin_load_more_btn_border_color', '#222222');
        }
        if (!(('skin_load_more_btn_hover_color') in this.formData)) {
            this.$set(this.formData, 'skin_load_more_btn_hover_color', '#cc0000');
        }
        if (!(('skin_load_more_btn_hover_text_color') in this.formData)) {
            this.$set(this.formData, 'skin_load_more_btn_hover_text_color', '#ffffff');
        }
        if (!(('skin_load_more_btn_hover_border_color') in this.formData)) {
            this.$set(this.formData, 'skin_load_more_btn_hover_border_color', '#cc0000');
        }
        if (!(('skin_quick_view_btn_bg_color') in this.formData)) {
            this.$set(this.formData, 'skin_quick_view_btn_bg_color', '#222222');
        }
        if (!(('skin_quick_view_btn_text_color') in this.formData)) {
            this.$set(this.formData, 'skin_quick_view_btn_text_color', '#ffffff');
        }
        if (!(('skin_quick_view_btn_border_color') in this.formData)) {
            this.$set(this.formData, 'skin_quick_view_btn_border_color', '#222222');
        }
        if (!(('skin_quick_view_btn_hover_color') in this.formData)) {
            this.$set(this.formData, 'skin_quick_view_btn_hover_color', '#cc0000');
        }
        if (!(('skin_quick_view_btn_hover_text_color') in this.formData)) {
            this.$set(this.formData, 'skin_quick_view_btn_hover_text_color', '#ffffff');
        }
        if (!(('skin_quick_view_btn_hover_border_color') in this.formData)) {
            this.$set(this.formData, 'skin_quick_view_btn_hover_border_color', '#cc0000');
        }
    }
};
</script>

<style scoped lang="scss">
</style>
